<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap-responsive.min.css}"/>
    <link rel="stylesheet" th:href="@{css/bwizard.min.css}"/>
    <link rel="stylesheet" th:href="@{css/default.css}">
    <link rel="stylesheet" th:href="@{css/fileinput.css}">
</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">审计附注报告生成</a>
        </div>
    </div>
</div>
<div class="container">
    <h2>Example</h2>
    <div id="wizard">
        <ol>
            <li>附注word模版上传</li>
            <li>系统数据校验</li>
            <li>报告数据生成</li>
            <li>报告下载</li>
        </ol>

        <div>
            <form id="wordform">
                <input id="wordupload" name="file" type="file" class="file" data-preview-file-type="text">
            </form>
            <hr/>
            <div id="response">
            </div>

        </div>

        <div>
            <div class="container kv-main">
                <div class="page-header">

                    <button id="btndata" th:onclick="'javascript:dataword();'"  class="btn btn-primary" data-loading-text="Loading...">数据准备</button>
                    <button id="btn" class="btn btn-primary" data-loading-text="Loading...">开始校验</button>
                    <div id="div3" th:fragment="div3">
                        <h3 th:if="${dataResult}" th:text="${dataResult}"></h3>
                    </div>
                </div>
                <hr>
                <div id="div1" th:fragment="div1">
                    <div th:if="${cklist} ne null">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th colspan="5" th:text="${checkFalg}" class="text-warning"></th>
                            </tr>
                            <tr>
                                <th>
                                    校验编号
                                </th>
                                <th>
                                    校验结果
                                </th>
                                <th>
                                    详细信息
                                </th>
                                <th>
                                    数量
                                </th>
                                <th>
                                    编辑
                                </th>
                            </tr>
                            </thead>
                            <tbody>


                            <tr th:each="ck:${cklist}" class="info">
                                <td th:text="${ck.id}"></td>
                                <td th:text="${ck.name}"></td>
                                <td th:text="${ck.memo}"></td>
                                <td th:text="${ck.cnt}"></td>
                                <td>
                                    <button id="btnck" th:onclick="'javascript:ckd(\''+${ck.id}+'\');'"  data-loading-text="Loading..." class="btn btn-primary">
                                        详情
                                    </button>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                    <hr>
                    <div th:if="${errorcount} eq 0">
                        <!--<button onclick="javascrtpt:window.location.href='/dowloadword'" class="btn btn-primary">报告生成</button>-->
                    </div>
                </div>
                <div id="div2" th:fragment="div2">
                    <div th:if="${ckdetail} ne null">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>
                                    校验编号
                                </th>
                                <th>
                                    word报告数据
                                </th>
                                <th>
                                    系统录入数据
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="ckd:${ckdetail}" class="error">
                                <td th:text="${ckd.id}"></td>
                                <td th:text="${ckd.nameWord}"></td>
                                <td th:text="${ckd.nameTmpl}"></td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>


                <button onclick="javascrtpt:window.location.href='/dowloadword'" class="btn btn-primary">下一步</button>

            </div>
        </div>
        <div>
           <h3>数据生成</h3>
        </div>
        <div>
            <h3>报告下载</h3>
        </div>
    </div>
</div>


<script th:src="@{js/jquery.min.js}"></script>

<script th:src="@{js/bwizard.min.js}" type="text/javascript"></script>
<script th:src="@{js/fileinput.js}" type="text/javascript"></script>
<script th:src="@{js/fileinput_locale_zh.js}" type="text/javascript"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
<script type="text/javascript">
    $("#wizard").bwizard();
</script>

<script>

        $("#wordupload").fileinput({
            uploadUrl: "/upload",//上传的地址
            uploadAsync: true,              //异步上传
            language: "zh",                 //设置语言
            showCaption: true,              //是否显示标题
            showUpload: true,               //是否显示上传按钮
            showRemove: true,               //是否显示移除按钮
            showPreview : true,             //是否显示预览按钮
            browseClass: "btn btn-primary", //按钮样式
            uploadLabel: "上传",           //设置上传按钮的汉字
            enctype: 'multipart/form-data',
            dropZoneEnabled: false,         //是否显示拖拽区域
            allowedFileExtensions: ["docx"], //接收的文件后缀
            maxFileCount: 1,                        //最大上传文件数限制
            previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
            allowedPreviewTypes: null
        }).on("fileuploaded", function(event, data) {
            var response=data.response;

            var html = "<div style='float:left;'><p style='text-align:left'>上传结果：  " + response.data + "</p></div>"

            $(html).appendTo($('#response'));
        }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
            var response=data.response;
            alert('文件上传失败！'+msg);
            var html = "<div style='float:left;'><p style='text-align:left'>上传结果：  " + response.msg + "</p></div>"
            $(html).appendTo($('#response'));
        });

</script>

</body>
</html>